import React, { Component } from 'react';
import NavBar from '../components/NavBar/NavBar';
import TarBar from '../components/TarBar/TarBar'
import { connect } from 'react-redux'
import { mapState, mapDisPatch } from '../store/bindState'
class Common extends Component {
  constructor(props) {
    super(props)

    this.state = {
      items: [
        {
          iconname: 'icon-shouye',
          title: '首页',
          path: '/',
        },
        {
          iconname: 'icon-24gl-newspaper',
          title: '新闻',
          path: '/news',
        },
        {
          iconname: 'icon-mine',
          title: '我的',
          path: '/my',
        }
      ]
    }
  }

  render() {
    return (
      <div>
        <NavBar {...this.props}></NavBar>
        {this.props.children}
        <TarBar {...this.props} items={this.state.items}></TarBar>
      </div>
    );
  }
  //生命周期函数
  componentDidMount() {
    // 在页面显示前可以更改store中的state数据，返回按钮状态和导航标题
    this.props.changeTiele(this.props.meta.title)
    this.props.changeBack(this.props.meta.deep > 1 ? true : false)
    //第一次路由访问时确定是那一个tabbar
    this.props.changeBarIndex(this.props.meta.index - 1)
    //如果不是一级路由需要隐藏tabbar
    let show = this.props.meta.deep > 1 ? false : true
    this.props.changeTabBarShow(show)
    //对需要验证的路由进行处理
    if (this.props.meta.auth) {
      if (Math.floor(Math.random() * 2) == 1) {
        this.props.history.replace('/login');
        this.props.changeBarIndex(2)
      }
    }
  }
}


//mapDisPatch向当前组件绑定操作方法，params是否需要向内部传值
export default mapDisPatch(Common, [{ type: "changeTiele", params: true }, { type: "changeBack", params: true }, { type: "changeBarIndex", params: true }, { type: "changeTabBarShow", params: true }]);